<template>
	<view class="wrap">
		<view class="item" v-if="vipInfo&&vipInfo.level"
		:style="{backgroundImage:`url(${$IMG_URL}/assets/memberCardbg${vipInfo.level}.png)`}" 
		 @click="go(`/pages/index/platformIncome/platformIncomeDetails?level=${item.level}`)">
			<view class="top s-flex-r-b-s">
				<view class="l s-flex-r-s-s">
					<image class="img" :src="`/static/images/memberCard/${vipInfo.level}.png`" mode=""></image>
					<view class="name">
						{{vipInfo.name}}
					</view>
				</view>
				<view class="more">
					收益详情 >
				</view>
				
			</view>
			<view class="btm s-flex-r-b-s">
				<view class="money-box s-flex-c-s-c flex1">
					<view class="money">
						¥{{vipInfo.lastday_money}}
					</view>
					<text class="name">昨日收益</text>
				</view>
				<view class="line"></view>
				<view class="money-box s-flex-c-s-c flex1">
					<view class="money">
						¥{{vipInfo.today_money}}
					</view>
					<text class="name">今日预期收益</text>
				</view>
			</view>
		</view>
		<u-empty :margin-top="100" v-else text="暂无数据" mode="history"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				vipInfo:{}
			};
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(){
				this.$http('vip.index', {}).then(res => {
					this.vipInfo = res.data.vipInfo||{}
				});
			},
		},
	}
</script>

<style lang="scss">
.wrap{
	padding: 18rpx 32rpx;
	.item{
		width: 686rpx;
		height: 250rpx;
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		margin-bottom: 20rpx;
		&:nth-child(2) {
			background-size: 100% 100%;
			.top{
				.btn{
					background: #6464C8;
					}
			}
		}
		&:nth-child(3){
			background-size: 100% 100%;
			.top{
				.btn{
					background: linear-gradient( 180deg, #83888B 0%, #43474A 100%);
					}
			}
		}
		.top{
			
			.l{
				.img{
					margin-left: 40rpx;
					width: 98rpx;
					height: 130rpx;
				}
				.name{
					margin-top: 54rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #03102E;
					line-height: 47rpx;
					margin-left: 26rpx;
				}
				
			}
			.more{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
				line-height: 28rpx;
				margin-top: 50rpx;
				margin-right: 30rpx;
			}
			.btn{
				margin-top: 52rpx;
				width: 136rpx;
				height: 60rpx;
				background: #7CA4FA;
				border-radius: 29rpx 29rpx 29rpx 29rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 33rpx;
			}
		}
		.btm{
			padding-left: 26rpx;
			padding-right: 32rpx;
			.money-box{
				
				.money{
					font-weight: 800;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
					margin-bottom: 10rpx;
				}
				.name{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					line-height: 34rpx;
				}
			}
			.line{
				margin-top: 10rpx;
				width: 2rpx;
				height: 58rpx;
				background: #FFFFFF;
			}
		}
		
	}
}
.s-flex-wrap{
	  flex-wrap: wrap;
  }
  .s-flex-r-s-s {
    display: flex;
  }
  .s-flex-r-s-c {
    display: flex;
    align-items: center;
  }
  .s-flex-r-e-c {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .s-flex-r-c-c {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .s-flex-r-b-c {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .s-flex-r-b-s {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .s-flex-r-b-e {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .s-flex-c-s-s {
    display: flex;
    flex-direction: column;
  }

  .s-flex-c-s-c {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .s-flex-c-b-s {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .s-flex-c-c-c {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .s-flex-c-s-e {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .s-flex-c-e-c {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
  }
  .flex1{
	  flex: 1;
  }

</style>
